<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代理</title>
</head>
<body>

</body>
<script>
    const definedReact = (target, key, value) => {
        Object.defineProperty(target, key, {
            get: () => value,
            set: (newValue) => {
                const oldValue = value
                if (newValue !== value) {
                    value = newValue;
                    console.log('key :', key,'oldValue:', oldValue,'value:', value);
                }
            }
        })
    }
    const observer = (target) => {
        if (typeof target !== 'object' || target === null) {
            return target
        }
        for (const key in target) {
            definedReact(target, key, target[key])
        }
    }
    let a = {a: {a: 1}, b: 2};
    // observer(a)

    const proxy = new Proxy(a, {
        get: (target, key) => target[key],
        set: (target, key, value) => {
            const oldValue = target[key]
            Reflect.set(target, key, value);
            console.log('key :', key,'oldValue:', oldValue,'value:', value);
        }
    })
</script>
</html>
